<template>
    <el-container>
        <el-header height="40px" class="padding0">
            <router-link active-class="active" v-slot="{ navigate, isActive }" custom :to="{ name: '题目讨论' }">
                <el-button :type="isActive ? 'primary' : 'default'" @click="navigate">
                    题目讨论
                </el-button>
            </router-link>
            <router-link active-class="active" v-slot="{ navigate, isActive }" custom :to="{ name: '视频讨论' }">
                <el-button :type="isActive ? 'primary' : 'default'" @click="navigate">视频讨论</el-button>
            </router-link>

            <router-link active-class="active" v-slot="{ navigate, isActive }" custom :to="{ name: '比赛讨论' }">
                <el-button :type="isActive ? 'primary' : 'default'" @click="navigate">比赛讨论</el-button></router-link>

            <router-link active-class="active" v-slot="{ navigate, isActive }" custom :to="{ name: '题解审核' }">
                <el-button :type="isActive ? 'primary' : 'default'" @click="navigate">题解审核</el-button></router-link>

            <router-link active-class="active" v-slot="{ navigate, isActive }" custom :to="{ name: '测试点审核' }">
                <el-button :type="isActive ? 'primary' : 'default'" @click="navigate">测试点审核</el-button></router-link>
        </el-header>
        <el-main class="padding0 margin-top20">
            <router-view :changeobj="changeobj" v-model:obj="obj" :setcount="setcount">
            </router-view>
        </el-main>
        <el-pagination class="pager" :page-size="Number(obj._limit)" :total="count" layout="total,prev, pager, next"
            @current-change="handleCurrentChange">
        </el-pagination>
    </el-container>
</template>

<script setup lang="ts">
import { assign } from 'lodash-es';
import { reactive, ref } from 'vue';


const obj = reactive({
    _limit: 20,
    _offset: 0,
    _order: 'ID',
    _sortable: 'DESC'
})

function changeobj(data: any) {
    Object.assign(obj, assign(obj, data))
}

const count = ref(0)

function handleCurrentChange(val: number) {
    obj._offset = obj._limit * (val - 1);
}

function setcount(n: number) {
    count.value = n
}
</script>
